<template>
   <div> 
                <img :src="User.headphoto" class="headImg" v-if="User">
                <button class="headImg" @click="LOGINSTATEON"  v-else>登录</button>

                <div class="Navi flex">
                     <router-link  class="NaviOne"   v-for="item in naviData" active-class="active"
                      :to="item.path" :key="item.id">{{item.name}}
                       <div class="bottom"></div>
                      </router-link>
                </div>
                 
             
              <img src="@/assets/function/Add.png" class="headImg" @click="leftNaviInfo.state = true">


               <LeftNavi :leftNaviInfo="leftNaviInfo" v-if="leftNaviInfo.state"/>

   </div>
</template>
<script>
import { mapState,mapMutations} from 'vuex'
import LeftNavi from '../LeftNavi/LeftNavi.vue'
  export default 
  {
     name :'', 
     components:{ LeftNavi},
     props:['naviData'],
     data() {
        return {
            leftNaviInfo:{state:false}
        }
     },
     computed:{
        ...mapState('Login',['User']),
     },
     methods:{
        ...mapMutations('Login',['LOGINSTATEON']),
     },
      
  }
</script>
<style scoped lang='less'>

 .headImg{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        color: white;
        background: var(--GeneralBackColor);
    }
button{
    box-shadow: 0 0 5px white;
}


.NaviOne{
    margin: 5px;
    padding:2px 15px;
    height: 30px;
    line-height: 30px;
   
    color: white;
    font-size: 18px;
    font-weight: 600;
    overflow: hidden;

    .icon{
       width: 25px;
       height:25px;
    }
    

    .bottom{
        margin-top: 2px;
        width: 0px;
        height: 5px;
        background: var(--GeneralBackColor);
        transition-duration: 0.2s;
    }
}
.active{
    border-radius: 20px;
    background: var(--GeneralBackColor);
    box-shadow: 0 0 5px white;
    color: white;
}
.active:hover .bottom{
    display: none;
}
.NaviOne:hover .bottom{
    width:calc( 100% );
    box-shadow: 0 0 5px white;
}


</style>